<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>虚拟节点</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../admin/css/other/virNode.css" />
</head>

<body>
    <div class="virNode-container">
        <button type="button" lay-submit lay-filter="login" class="layui-btn add-node-btn">新增节点</button>
        <div class="node-list-container">
            <div class="node-item-content">
                <div class="node-name-div">
                    <img src="/admin/images/virNode/ing_jd.png" class="node-img" />
                    <div class="title-info">
                        <div class="node-name">docker</div>
                        <img src="/admin/images/virNode/bq_zx.png" class="status-item" />
                    </div>
                </div>
                <div class="node-info"><span class="key">系统：</span>CentOSLinux</div>
                <div class="node-info"><span class="key">地址：</span>127.0.0.1：2375</div>
                <div class="node-info"><span class="key">配置：</span>8核心 | 125.74GB内存</div>
                <div class="node-info"><span class="key">版本：</span>18.03.1-ce</div>
                <div class="operation-div">
                    <div class="ope-btn edit-btn"><img src="../../admin/images/virNode/icon_bg_bj.png"/>编辑</div>
                    <div class="ope-btn delete-btn"><img src="../../admin/images/virNode/icon_bg_sc.png"/>删除</div>
                </div>
            </div>
            <div class="node-item-content">
                <div class="node-name-div">
                    <img src="/admin/images/virNode/ing_jd.png" class="node-img" />
                    <div class="title-info">
                        <div class="node-name">docker</div>
                        <img src="/admin/images/virNode/bq_zx.png" class="status-item" />
                    </div>
                </div>
                <div class="node-info"><span class="key">系统：</span>CentOSLinux</div>
                <div class="node-info"><span class="key">地址：</span>127.0.0.1：2375</div>
                <div class="node-info"><span class="key">配置：</span>8核心 | 125.74GB内存</div>
                <div class="node-info"><span class="key">版本：</span>18.03.1-ce</div>
                <div class="operation-div">
                    <div class="ope-btn edit-btn"><img src="../../admin/images/virNode/icon_bg_bj.png"/>编辑</div>
                    <div class="ope-btn delete-btn"><img src="../../admin/images/virNode/icon_bg_sc.png"/>删除</div>
                </div>
            </div>
            <div class="node-item-content">
                <div class="node-name-div">
                    <img src="/admin/images/virNode/ing_jd.png" class="node-img" />
                    <div class="title-info">
                        <div class="node-name">docker</div>
                        <img src="/admin/images/virNode/bq_zx.png" class="status-item" />
                    </div>
                </div>
                <div class="node-info"><span class="key">系统：</span>CentOSLinux</div>
                <div class="node-info"><span class="key">地址：</span>127.0.0.1：2375</div>
                <div class="node-info"><span class="key">配置：</span>8核心 | 125.74GB内存</div>
                <div class="node-info"><span class="key">版本：</span>18.03.1-ce</div>
                <div class="operation-div">
                    <div class="ope-btn edit-btn"><img src="../../admin/images/virNode/icon_bg_bj.png"/>编辑</div>
                    <div class="ope-btn delete-btn"><img src="../../admin/images/virNode/icon_bg_sc.png"/>删除</div>
                </div>
            </div>
            <div class="node-item-content">
                <div class="node-name-div">
                    <img src="/admin/images/virNode/ing_jd.png" class="node-img" />
                    <div class="title-info">
                        <div class="node-name">docker</div>
                        <img src="/admin/images/virNode/bq_zx.png" class="status-item" />
                    </div>
                </div>
                <div class="node-info"><span class="key">系统：</span>CentOSLinux</div>
                <div class="node-info"><span class="key">地址：</span>127.0.0.1：2375</div>
                <div class="node-info"><span class="key">配置：</span>8核心 | 125.74GB内存</div>
                <div class="node-info"><span class="key">版本：</span>18.03.1-ce</div>
                <div class="operation-div">
                    <div class="ope-btn edit-btn"><img src="../../admin/images/virNode/icon_bg_bj.png"/>编辑</div>
                    <div class="ope-btn delete-btn"><img src="../../admin/images/virNode/icon_bg_sc.png"/>删除</div>
                </div>
            </div>
            <div class="node-item-content">
                <div class="node-name-div">
                    <img src="/admin/images/virNode/ing_jd.png" class="node-img" />
                    <div class="title-info">
                        <div class="node-name">docker</div>
                        <img src="/admin/images/virNode/bq_zx.png" class="status-item" />
                    </div>
                </div>
                <div class="node-info"><span class="key">系统：</span>CentOSLinux</div>
                <div class="node-info"><span class="key">地址：</span>127.0.0.1：2375</div>
                <div class="node-info"><span class="key">配置：</span>8核心 | 125.74GB内存</div>
                <div class="node-info"><span class="key">版本：</span>18.03.1-ce</div>
                <div class="operation-div">
                    <div class="ope-btn edit-btn"><img src="../../admin/images/virNode/icon_bg_bj.png"/>编辑</div>
                    <div class="ope-btn delete-btn"><img src="../../admin/images/virNode/icon_bg_sc.png"/>删除</div>
                </div>
            </div>
            <div class="node-item-content">
                <div class="node-name-div">
                    <img src="/admin/images/virNode/ing_jd.png" class="node-img" />
                    <div class="title-info">
                        <div class="node-name">docker</div>
                        <img src="/admin/images/virNode/bq_zx.png" class="status-item" />
                    </div>
                </div>
                <div class="node-info"><span class="key">系统：</span>CentOSLinux</div>
                <div class="node-info"><span class="key">地址：</span>127.0.0.1：2375</div>
                <div class="node-info"><span class="key">配置：</span>8核心 | 125.74GB内存</div>
                <div class="node-info"><span class="key">版本：</span>18.03.1-ce</div>
                <div class="operation-div">
                    <div class="ope-btn edit-btn"><img src="../../admin/images/virNode/icon_bg_bj.png"/>编辑</div>
                    <div class="ope-btn delete-btn"><img src="../../admin/images/virNode/icon_bg_sc.png"/>删除</div>
                </div>
            </div>
        </div>
        <div id="virNodeFormLayer" class="virNode-form-layer">
            <form class="layui-form">
                <div class="layui-form-item ">
                    <label class="layui-form-label"><span class="required-span">*</span>节点标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="keyward" id="keyward" class="layui-input layui-input-white" lay-verify="required" placeholder="请输入节点标题"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item ">
                    <label class="layui-form-label"><span class="required-span">*</span>通信类型</label>
                    <div class="layui-input-block">
                        <input type="radio" name="type" value="1" title="Unix" checked />
                        <input type="radio" name="type" value="2" title="TCP" />
                        <input type="radio" name="type" value="3" title="TCP&TLS" />
                    </div>
                </div>
                <div class="layui-form-item ">
                    <label class="layui-form-label"><span class="required-span">*</span>通信地址</label>
                    <div class="layui-input-block">
                        <div style="display: flex;flex-direction: row;">
                            <input type="text" name="keyward" id="keyward" class="layui-input layui-input-white" lay-verify="required" placeholder="请输入题目问题"
                                autocomplete="off" class="layui-input" style="margin-right: 10px;">
                            <button class="layui-btn layui-btn-normal">测试连接</button>
                        </div>
                        <div><span class="required-span">*</span>请输入Docker Api连接地址</div>
                    </div>
                </div>
                <div class="layui-form-item ">
                    <label class="layui-form-label"><span class="required-span">*</span>映射地址</label>
                    <div class="layui-input-block">
                        <div style="display: flex;flex-direction: row;">
                            <input type="text" name="keyward" id="keyward" class="layui-input layui-input-white" lay-verify="required" placeholder="请输入题目问题"
                                autocomplete="off" class="layui-input" style="margin-right: 10px;">
                        </div>
                        <div><span class="required-span">*</span>请输入题目对外显示的IP地址</div>
                    </div>
                </div>
                <div class="layui-form-item ">
                    <label class="layui-form-label"><span class="required-span">*</span>映射端口</label>
                    <div class="layui-input-block" style="display: flex;">
                        <input type="text" name="keyward" id="keyward" class="layui-input layui-input-white" lay-verify="required" placeholder="最小端口"
                            autocomplete="off" class="layui-input">
                        <span style="margin-left: 10px; margin-right: 10px;">—</span>
                        <input type="text" name="keyward" id="keyward" class="layui-input layui-input-white" lay-verify="required" placeholder="最大端口"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
                <!-- <div class="layui-form-item ">
                    <label class="layui-form-label">CA证书</label>
                    <div class="layui-input-block">
                        <textarea class="layui-textarea" placeholder="请输入CA证书...请输入cert.pem文件的内容"></textarea>
                    </div>
                </div>
                <div class="layui-form-item ">
                    <label class="layui-form-label">证书私钥</label>
                    <div class="layui-input-block">
                        <textarea class="layui-textarea" placeholder="请输入证书私钥...请输入key.pem文件的内容"></textarea>
                    </div>
                </div> -->
                <!-- <div class="layui-form-item ">
                    <label class="layui-form-label">证书密码</label>
                    <div class="layui-input-block">
                        <input type="text" name="keyward" id="keyward" class="layui-input layui-input-white" lay-verify="required" placeholder="请输入证书密码"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item ">
                    <label class="layui-form-label"><span class="required-span">*</span>验证证书</label>
                    <div class="layui-input-block">
                        <input type="radio" name="method" value="1" title="验证证书" checked />
                        <input type="radio" name="method" value="2" title="忽略证书" />
                    </div>
                </div>
                <div class="layui-form-item ">
                    <label class="layui-form-label"><span class="required-span">*</span>验证域名</label>
                    <div class="layui-input-block">
                        <input type="radio" name="method" value="1" title="验证域名" checked />
                        <input type="radio" name="method" value="2" title="忽略域名" />
                    </div>
                </div> -->
                <!-- <div class="layui-form-item ">
                    <label class="layui-form-label">ServerName</label>
                    <div class="layui-input-block">
                        <input type="text" name="keyward" id="keyward" class="layui-input layui-input-white" lay-verify="required" placeholder="请输入ServerName验证"
                            autocomplete="off" class="layui-input">
                    </div>
                </div> -->
            </form>
        </div>
    </div>
    <script>
        layui.use(['table', 'dropdown', 'form', 'jquery', 'layer', 'laydate'], function () {
			var form = layui.form;
            var $ = layui.jquery;
            $('.edit-btn').on('click', function(){
                openLayer('edit');
            });

            $('.add-node-btn').on('click', function() {
                openLayer('add');
            })

            $('.delete-btn').on('click', function() {
                layer.confirm(
                    '确定要删除该虚拟节点吗?',
                    { title: '提示' },
                    function () {
                        layer.close(index);
                        // 向服务端发送删除指令
                    }
                );
            })

            function openLayer (type) {
                layer.open({
                    type: 1,
                    skin: 'previewImg',
                    title: '新增虚拟节点',
                    content: $("#virNodeFormLayer"), // 获取ID为formLayer的DOM元素
                    area: ['700px', '480px'],
                    btn: ['提交', '取消'],
                    shadeClose: false,success: function(layero, index){
                        var shade = $('.layui-layer-shade');
                        console.log(layer.zIndex);
                        shade.css('z-index', 899);
                    },
                    yes: function(index, layero){
                        // 表单提交事件
                        // 触发提交事件
                        form.on('submit(formSubmit)', function(data){
                        // 发送Ajax请求提交表单
                        // $.post('path/to/your/server/endpoint', data.field, function(response){
                        //     layer.msg('表单提交成功!', {time: 1000});
                        //     // 关闭弹框
                        //     layer.close(index);
                        // });
                        return false; // 阻止表单默认提交
                        });
                    }
                });
            }
        });

    </script>
</body>

</html>